<template>
    <div class="app-container">
        <el-form ref="refbut">
            <el-form-item label="统计依据:" prop="dictName">
                <el-select v-model="form.type" placeholder="请选择" style="width:300px" @change="typeSelectTap">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-card class="box-card">
            <el-row ref="queryForm">
                <el-col :span="24"><el-form ref="form" :inline="true" v-show="showSearch" label-width="68px"
                        style="display: flex;flex-direction: row;justify-content: space-between;">
                        <div>
                            <el-form-item label="鉴定阶段" prop="level" v-if="form.type == 'user'">
                                <el-select v-model="form.level" placeholder="请选择" style="width:250px" @change="onSelectTap">
                                    <el-option v-for="item in levellist" :key="item.value" :label="item.label"
                                        :value="item.value"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="审核人员" prop="userid"
                                v-if="form.type == 'user' && form.level != undefined && form.level != null && form.level != ''">
                                <el-select v-model="form.userid" placeholder="请选择" style="width:250px">
                                    <el-option v-for="item in userTreeList" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-s-data" @click="handleQuery"
                                v-if="form.type == 'user'">统计</el-button>
                            <el-button type="primary" icon="el-icon-refresh-left" @click="resetQuery"
                                v-if="form.type == 'user'">重置</el-button>
                            <el-button type="warning" icon="el-icon-download" @click="handleExport">导出</el-button>
                        </el-form-item>
                    </el-form>
                    <el-divider></el-divider>

                </el-col>
            </el-row>

            <el-row ref="refTitle">
                <el-col :span="24">
                    <h1 class="h1">{{ title }}</h1>
                    <h4 class="h4">制表日期：{{ CREATETIME }}</h4>
                </el-col>
            </el-row>
            <el-table v-loading="loading" ref="tableRef" :data="tableList" border :key="Math.random()" v-if="form.type"
                :height="tableHeight">
                <el-table-column label="序号" align="center" type="index" />
                <el-table-column label="初审人" align="center" prop="CHUSHENPEOPLENAME" :show-overflow-tooltip="true"
                    v-if="form.level == 'chushen'"   />
                <el-table-column label="复审人" align="center" prop="FUSHENPEOPLENAME" :show-overflow-tooltip="true"
                    v-if="form.level == 'fushen'"   />

                 <el-table-column label="鉴定任务名称" prop="JIANDINGRENWUNAME" align="center" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname' || form.type == 'user'"   />
               <el-table-column label="鉴定开始时间" align="center" prop="JIANDINGSTARTDATE"
                    v-if="form.type == 'jobname' || form.type == 'user'"   />
                <el-table-column label="鉴定结束时间" align="center" prop="JIANDINGENDDATE" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname' || form.type == 'user'"  />
                <el-table-column label="门类" align="center" prop="NAME"
                    v-if="form.type == 'user' || form.type == 'category'"></el-table-column>
                <el-table-column label="档案门类" align="center" prop="NAME" v-if="form.type == 'jobname'"></el-table-column>
                <el-table-column label="类型" align="center" prop="TYPE" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname' || form.type == 'category' || form.type == 'user'">
                    <template slot-scope="scope">
                        <span v-if="scope.row.TYPE == '0'">件</span>
                        <span v-if="scope.row.TYPE == '1'">卷</span>
                        <span v-if="scope.row.TYPE == '3'">项目</span>
                    </template>
                </el-table-column>

               <el-table-column label="全宗号" align="center" prop="QZH" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname' || form.type == 'user'" />
                <el-table-column label="全宗号" align="center" prop="FONDS_CODE" :show-overflow-tooltip="true"
                    v-if="form.type == 'category' || form.type == 'qzh'"  />
                <el-table-column label="类型" align="center" prop="TYPE" :show-overflow-tooltip="true"
                    v-if="form.type == 'qzh'">
                    <template slot-scope="scope">
                        <span v-if="scope.row.TYPE == '0'">件</span>
                        <span v-if="scope.row.TYPE == '1'">卷</span>
                        <span v-if="scope.row.TYPE == '3'">项目</span>
                    </template>
                </el-table-column>
                 <el-table-column label="档案数量" align="center" prop="JIANNUM" :show-overflow-tooltip="true" />

             <el-table-column label="案卷数量" align="center" prop="JUANNUM" :show-overflow-tooltip="true" />
                 <el-table-column label="总页数" align="center" prop="ALLYS" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'"  />
                <el-table-column label="总电子文件数" align="center" prop="ALLFILENUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' || form.type == 'category' || form.type == 'qzh'" />
                <el-table-column label="总电子文件数" align="center" prop="ALLEFILENUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'"  />
                <el-table-column label="总页数" align="center" prop="ALLYS" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' || form.type == 'category' || form.type == 'qzh'"  />

                 <el-table-column label="已初审数量" align="center" prop="YCSNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'qzh' || form.type == 'category'"  />
                <el-table-column label="已复审数量" align="center" prop="YFSNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'qzh' || form.type == 'category'" />
                <el-table-column label="初审文件数量" align="center" prop="CHUSHENWENJIANNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' && form.level == 'chushen'"/>
                <el-table-column label="复审文件数量" align="center" prop="FUSHENWENJIANNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' && form.level == 'fushen'" />

                 <el-table-column v-for="(col, index) in dict.type.MJ" :key="index" :prop="col.name" :label="col.label"
                    align="center" header-align="center"  >
                    <template slot-scope="scope">
                        {{ scope.row[col.value] }}
                    </template>
                </el-table-column>
                <el-table-column label="异议数量" align="center" prop="YIYINUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'"  />
                <el-table-column label="抽检数量" align="center" prop="CJNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'category' || form.type == 'qzh'" />
                <el-table-column label="异议数量" align="center" prop="YYNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'category'||form.type == 'qzh'"/>

                <el-table-column label="初审完成数量" align="center" prop="CHUSHENENDNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'"  />
                <el-table-column label="复审完成数量" align="center" prop="FUSHENENDNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'" />
                <el-table-column label="抽检数量" align="center" prop="CJNUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' && form.level == 'fushen'" />
                <el-table-column label="复审抽检率" align="center" prop="FSCCLV" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' && form.level == 'fushen'" />
                <el-table-column label="初审完成率" align="center" prop="CSWCLV" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' && form.level == 'chushen' || form.type == 'category' || form.type == 'qzh'" />

                <el-table-column label="复审完成率" align="center" prop="FSWCLV" :show-overflow-tooltip="true"
                    v-if="form.type == 'user' && form.level == 'fushen' || form.type == 'category' || form.type == 'qzh'"/>
                <el-table-column label="复审抽检率" align="center" prop="FSCCLV" :show-overflow-tooltip="true"
                    v-if="form.type == 'category' || form.type == 'qzh'" />

                <el-table-column label="复审抽查数量" align="center" prop="FUSHENCHOUCHANUM" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'" />

                <el-table-column label="初审完成率" align="center" prop="CSWCLV" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'" />

                <el-table-column label="复审完成率" align="center" prop="FSWCLV" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'" />
                <el-table-column label="抽检率" align="center" prop="CHOUCHALV" :show-overflow-tooltip="true"
                    v-if="form.type == 'jobname'" />

            </el-table>
        </el-card>

    </div>
</template>

<script>
import { getuser, tongji } from "@/api/archive/archivalAppraisal/classificationIdentify/openArchivesAppraisal"
export default {
    archive_Dicts: ['IS_OPENS', "TYPE", "BGQX","MJ"],
    data() {
        return {
            loading: false,
            tableList: [],
            form: {
                type: undefined,
                level: undefined,
                userid: undefined
            },
            // 显示搜索条件
            showSearch: true,
            typeList: [  //统计依据
                {
                    label: "鉴定任务",
                    title: "鉴定任务情况统计表",
                    value: "jobname"
                },
                {
                    label: "审核人员",
                    title: "审核人员鉴定情况统计表",
                    value: "user"
                },
                {
                    label: "档案门类",
                    title: "档案门类鉴定情况统计表",
                    value: "category"
                },
                {
                    label: "全宗",
                    title: "全宗鉴定情况统计表",
                    value: "qzh"
                }
            ],
            levellist: [ //鉴定阶段
                {
                    label: "初审",
                    value: "chushen"
                },
                {
                    label: "复审",
                    value: "fushen"
                },
            ],
            userTreeList: [],
            CREATETIME: "",
            title: "",
            tableHeight: this.tableHeightData()

        }
    },
    created() {
        this.form.type = this.typeList[0].value;
        this.title = this.typeList[0].title;
        this.tongjiListPOST();
        const date = new Date()
        const year = date.getFullYear()
        const month = ('0' + (date.getMonth() + 1)).slice(-2)
        const day = ('0' + date.getDate()).slice(-2)
        this.CREATETIME = year + "年" + month + "月" + day + '日'


    },
    updated(){
        this.$nextTick(() => {
            this.$refs.tableRef.doLayout()
            })
    },
    mounted(){
        this.$nextTick(() => {
            this.$refs.tableRef.doLayout()
            })
    },
    methods: {
        //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = document.documentElement.clientHeight
                    //     console.log(this.$refs.queryForm.$el.offsetHeight, this.$refs.refbut.$el.offsetHeight, "sdklfjklliuhaiorng")
                    h = h - 200
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                        h = h - this.$refs.refbut.$el.offsetHeight
                    }
                    if (this.$refs.refTitle) {
                        h = h - this.$refs.refTitle.$el.offsetHeight
                    }
                    // console.log(h,"sdjfdklsjfkl")
                    this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度

                    return h
                }
            )

        },
        getuserPOST() {
            getuser({
                type: this.form.level
            }).then(res => {
                getuser({ type: this.form.level }).then(res => {
                    var USERID = res.data.USERID.split(",");
                    var USERNAME = res.data.USERNAME.split(",");
                    var list = [];
                    for (var i in USERID) {
                        list.push({
                            value: USERID[i],
                            label: USERNAME[i]
                        })
                    }

                    this.userTreeList = list

                })

            })
        },
        onSelectTap() {
            this.tongjiListPOST();
        },
        //统计依据下拉
        typeSelectTap() {
            for (var i in this.typeList) {
                if (this.form.type == this.typeList[i].value) {
                    this.title = this.typeList[i].title;
                }
            }
            if (this.form.type == 'user') {
                this.form.level = this.levellist[0].value;
                this.getuserPOST();
            } else {
                this.form.level = undefined
                this.form.userid = undefined
            }
            this.tongjiListPOST();
        },
        //统计
        handleQuery() {
            this.tongjiListPOST();
        },

        //重置
        resetQuery() {
            this.form = {
                type: "user",
                level: this.levellist[0].value,
                userid: undefined
            }
            this.tongjiListPOST();
        },
        tongjiListPOST() {
            this.loading = true
            tongji(this.form).then(res => {
                if (res.code == "200") {
                    this.loading = false
                    /*         for (var i in res.data) {

                                res.data[i].CSWCLV =res.data[i].CSWCLV.toFixed(2) + "%"
                                res.data[i].FSWCLV = res.data[i].FSWCLV.toFixed(2) + "%"
                                res.data[i].CHOUCHALV = res.data[i].CHOUCHALV.toFixed(2) + "%"
                             }*/
                    this.tableList = res.data
                    this.tableHeightData();
                }


            })
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('/archive/mijiidentify/exporttongji', {
                ...this.form
            }, `tongji_${new Date().getTime()}.xlsx`)
        },

    }
}
</script>

<style lang="scss" scoped>.el-divider {
    margin-top: 0;
}

.h1 {
    text-align: center;
    font-weight: 600;
}

.h4 {
    text-align: right;
}

.custom_table ::v-deep .el-table__fixed-right,
.custom_table::v-deep .el-table__fixed {
  height: 100% !important;
}


</style>
